<script lang="ts" setup name="MemberGradeDialog">
import { ElMessage, FormInstance } from 'element-plus'
import { reactive, ref } from 'vue'
import { Member } from '~/src/api/interface/member'
import { memberGradeDefault, memberGradeUpgrade, userDiscountTypes } from '~/src/utils/serviceDict'
// 会员类型
const gradeType = ref(0)
const onChangeGradeType = () => {
  dialogProps.value.row.rechargeAmount = 0
  dialogProps.value.row.expenditureMoney = 0
}

const rules = reactive({
  title: [{ required: true, message: '请填会员等级名称' }],
  rechargeAmount: [{ required: true, message: '请设置充值总金额' }],
  // prioritySortId: [{ required: true, message: "请填写会员优先级" }]
})

interface DialogProps {
  title: string
  row: Partial<Member.MemberGrade>
  api?: (params: any) => Promise<any>
  getTableList?: () => void
}

const dialogVisible = ref(false)
const dialogProps = ref<DialogProps>({
  title: '',
  row: {},
})

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps) => {
  dialogProps.value = params
  dialogVisible.value = true

  gradeType.value = params.row.rechargeAmount ? 0 : 1
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>()
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return
    try {
      await dialogProps.value.api!(dialogProps.value.row)
      ElMessage.success({ message: `${dialogProps.value.title}会员成功！` })
      dialogProps.value.getTableList!()
      dialogVisible.value = false
    } catch (error) {
      console.log(error)
    }
  })
}
watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) ruleFormRef.value?.resetFields()
  }
)

defineExpose({
  acceptParams,
})
</script>

<template>
  <vab-dialog v-model:modelValue="dialogVisible" :title="`${dialogProps.title}会员等级`" width="600">
    <el-form ref="ruleFormRef" label-suffix=" :" label-width="110px" :model="dialogProps.row" :rules="rules">
      <el-form-item label="等级名称" prop="title">
        <el-input v-model="dialogProps.row!.title" clearable placeholder="请填会员等级名称" />
      </el-form-item>
      <el-form-item label="等级类型">
        <el-radio-group v-model="gradeType" @change="onChangeGradeType">
          <el-radio label="充值总金额" :value="0" />
          <el-radio label="消费总金额" :value="1" />
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-if="!gradeType"
        label="充值总金额"
        prop="rechargeAmount"
        :rules="!gradeType ? rules.rechargeAmount : [{ required: false }]"
      >
        <input-number-float v-model="dialogProps.row!.rechargeAmount" class="w100" :controls="false" controls-position="right" :min="0" />
      </el-form-item>
      <el-form-item
        v-else
        label="消费总金额"
        prop="expenditureMoney"
        :rules="gradeType ? [{ required: true, message: '请输入' }] : [{ required: false }]"
      >
        <input-number-float v-model="dialogProps.row!.expenditureMoney" class="w100" :controls="false" controls-position="right" :min="0" />
      </el-form-item>
      <el-form-item label="会员优惠类型" prop="discountType">
        <el-select v-model="dialogProps.row!.discountType" class="w100">
          <el-option v-for="item in userDiscountTypes" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="会员折扣" prop="discountValue">
        <input-number-float
          v-model="dialogProps.row!.discountValue"
          class="w100"
          :controls="false"
          controls-position="right"
          :max="100"
          :min="1"
          :step="1"
        />
        <div style="font-size: 12px; color: #999999">
          说明：会员折扣指当前会员身份所享受会员优惠类型的价格基础上进行的折扣。
          例如：会员优惠类型为销售价，折扣设置80，会员购买该商品的价格=商品销售价*0.8（打八折输入80）
        </div>
      </el-form-item>
      <el-form-item label="是否默认" prop="isDefault">
        <el-select v-model="dialogProps.row!.isDefault" class="w100">
          <el-option v-for="item in memberGradeDefault" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="自动升级" prop="isOpenUpgrade">
        <el-select v-model="dialogProps.row!.isOpenUpgrade" class="w100">
          <el-option v-for="item in memberGradeUpgrade" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="会员优先级" prop="prioritySortId">
        <input-number-float v-model="dialogProps.row!.prioritySortId" :controls="false" disabled :min="0" style="width: 100%" />
        <div style="color: #999999">说明：优先级越大会员级别越高</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </vab-dialog>
</template>

<style lang="scss" scoped></style>
